{% extends "base.html" %}
{% load static %}

{% block title %}GodJin · 抖音{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/video.css' %}">
{% endblock %}

{% block content %}

  <!-- ===== 首页 Header ===== -->
  <header class="hero u-bleed py-5 mb-4 border-bottom">
    <div class="container">
      <div class="row align-items-center g-4">
        <div class="col-md-8">
          <h1 class="display-5 fw-bold mb-2">烬</h1>
          <p class="lead text-muted mb-0">星火余晖的一缕残烬</p>
        </div>

        <!-- 小屏居中，大屏右侧；图片自适应 -->
        <div class="col-md-4 text-md-end">
          <img src="{% static 'picture/video.png' %}"
               class="d-block mx-auto hero-cover"
               alt="封面占位图" loading="lazy">
        </div>
      </div>
    </div>
  </header>

{# 居中的表单卡片（宽度收敛到中间） #}
<div class="dy-hero container">
  <div class="row justify-content-center">
    <div class="col-12 col-md-10 col-lg-8">
      <div class="card dy-hero-card mb-4">
        <div class="card-body p-4">

          <form id="dyForm" method="post" action="{% url 'video_fetch' %}">
            {% csrf_token %}

            <!-- 输入框 + 清空按钮 -->
            <div class="input-group input-group-lg mb-3">
              <input
                type="text"
                name="query"
                class="form-control"
                value="{{ query|default:'' }}"
                required>
              <button class="btn btn-outline-danger" type="button" id="btnClear">清空</button>
            </div>

            <!-- 搜索 按钮行 -->
            <div class="d-flex gap-2 justify-content-center">
              <button class="btn btn-soft-orange cooldown-btn" type="submit" name="mode" value="single">搜索</button>
{#              <button class="btn btn-soft-blue" type="submit" name="mode" value="home">主页</button>#}
            </div>

            <!-- 加载提示 -->
            <div id="dyLoading" class="mt-3 alert alert-info py-2 px-3 d-none">
              正在加载<span class="dy-loading-dots"></span>
            </div>
          </form>

          <!-- 结果容器 -->
          <div id="dyResults" class="list-group mt-4"></div>

        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}

<!-- 选集 Modal -->
<div class="modal fade" id="episodeModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          选择剧集 <small class="text-muted" id="epModalTitle"></small>
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <div id="epList" class="d-flex flex-wrap gap-2"></div>
        <div id="epEmpty" class="alert alert-warning d-none mb-0">没有抓到分集信息。</div>
      </div>
      <div class="modal-footer d-flex justify-content-between align-items-center">
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="useProxySwitch">
          <label class="form-check-label" for="useProxySwitch">代理播放（绕过跨域/防盗链）</label>
        </div>
        <small class="text-muted">若播放失败，试着打开“代理播放”。</small>
      </div>
    </div>
  </div>
</div>

{% block extra_js %}

{#    // 把占位图URL注入给外部JS使用（外部JS无法使用{% static %}）#}
    <script>
    window.DY_PLACEHOLDER = "{% static 'picture/jinzhu.jpg' %}";
    </script>
<script src="{% static 'js/video.js' %}"></script>
{% endblock %}